<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>LingPowerAI</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script type="text/javascript">
			document.write('<script src="../../js/fix.js?rd=?rd=' + Math.random() + '"><\/script>');
		</script>
		<script type="text/javascript">
			link(['../../css/reset.css','../../fonts/iconfont/iconfont.css']);
		</script>
		<script type="text/javascript">
			//必须顺序加载
			script();
		</script>
	<script type="text/javascript">
	
	</script>
		<style type="text/css">
			body,html{
				background: #F8F8F8;
				
			}
			.mui-content{
				background: #F8F8F8;
			}
			
			p{
				padding: 0.1rem;
				font-size: 0.16rem;
				line-height: 0.24rem;
				color: #545454;
				padding-top: 0rem;
			}
	
				.countprice{
					padding: 0rem;
					font-size: 0.16rem;
					background: #FFFFFF;
					margin: 0rem;
					padding-left: 0.1rem;
					text-align: left;
					color: #545454;
					width: 100%;
					
					padding-bottom:0.1rem;
					padding-top:0.05rem;
					border-bottom: .5px solid #EEEEEE;
				}
				#priceCount{
					font-size: 0.18rem;
				}
				.gobybox{
					text-align: center;
				}
				#payment:active{
					background: #3a8e4c;
				}
				#payment {
					line-height: 0.4rem;
				background: #4abb62;
					color: #FFFFFF;
					border-radius: 0.05rem;
					margin: 0rem auto;
					width:100%;
					height: 0.4rem;
					border:none;
				}
		
			.about{
				border-radius: 0.05rem;
				padding:0.1rem 0.15rem;
				border:1px solid #47BAFE;
				background: #FFFFFF;
				margin:0rem 0.15rem;
				padding-bottom: 0.15rem;
			}
			
			.about h5{
				color: #47BAFE;
				border-radius: 5px;
				background: #FFFFFF;
				width: 1.2rem;
				height: 0.2rem;
				text-align: left;
			}
				.about p{
					padding: 0rem;
				}
				.card_Linbao{
					margin: 0.15rem;
					background: #FFFFFF;
				}
			
				.card_Linbao div:first-child{
					background-color: #F8F8F8;
					background-image: url("../../images/mine/rellBG.png");
					background-position: center;
					background-size:150% 200%; 
					text-align: center;
					min-height: 0.8rem;
					line-height: 0.8rem;
					color: #FFFFFF;
					font-size: 0.18rem;
					font-weight: bold;
					  font-family: unset !important;
				}
				.card_Linbao div:last-child{
					padding-left: 0.2rem;
					padding-top: 0.1rem;
					line-height: 0.35rem;
					font-size: 0.16rem;
				}
				.card_Linbao div:last-child p{
					font-size: 0.13rem;
					padding: 0rem;
					margin: 0rem;
				}
					.card_Linbao  .price{
						font-size: 0.4rem;
					}
					.card_Linbao .tip{
						color: #FFFFFF;
						border-radius: 0.1rem;
						padding: 0.02rem 0.1rem;
						background: #47BAFE;
						font-size: 0.12rem;
					}
					.buy{
						background: #FFFFFF;
						margin: 0.15rem;
						list-style: none;
						padding: 0rem;
						padding: 0.05rem;
						display: flex;
						margin-bottom: 0rem;
						flex-flow: wrap;
					}
					.buy li{
						font-size: 0.15rem;
						width:calc(30% - 0.1rem);
						text-align: center;
						margin: 0.1rem;
						box-sizing: content-box;
						height: 0.4rem;
						line-height: 0.4rem;
						border:0.01rem solid #EEEEEE;
					}
					.active_li{
						background: #47BAFE;
						color: #FFFFFF;
					}
					.nianka{
				
						height: 0.5rem;
						width: calc(100% - 1.2rem);
						margin-top: 0.05rem;
						display: inline-block;
					}
					.nianka h5{
						color: #47BAFE;
						text-align: center;
						font-size: 0.16rem;
					}
					.nianka p{
						text-align: center;
						font-size: 0.14rem;
					}
					.nkBox{
					 box-sizing: content-box;
						border:1px solid #f8f8f8;
						
					}
					.nkBox img{
						width: 0.5rem;
						height: 0.5rem;
						margin-left: 0.1rem;
					}
					.nkBox .ridio{
						text-align: center;
						line-height: 0.6rem;
						width: 0.6rem;
					}
					.nkBox .ridio span{
						color: #E3E3E3;
						font-size: 0.25rem;
					}
		</style>
	</head>
	<body style="display: none;">
	<!-- 	<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购买灵豹劵</h1>
		</header> -->
		<div class="mui-content">
			<div class="card_Linbao mui-row">
				<div class="mui-col-xs-3">￥<span id="price" class="price">0</span></div>
				<div class="mui-col-xs-9"><span class="tip">灵豹劵</span> 客户精准分析
				<p>使用灵豹劵可以获得更精准的客户分析</p>
				</div>
			</div>
			
			 <ul class="buy" id="buy">
				 <li value="10">10张</li>
				 <li value="30">30张</li>
				 <li value="50">50张</li>
				 <li value="100">100张</li>
				 <li value="200">200张</li>
				 <li><input id="number" type="number" placeholder="自定义" style="border: none;height: 100%; font-size: 0.15rem; text-align: center;"></li>
			 </ul>
			 <div class="buy nkBox" id="nktap" >
				 <img src="../../images/mine/huangGuan.png" alt="">
				 <div class="nianka">
					 <h5 id="yearcard_desc">现在开通年卡，立享X折优惠</h5>
					 <p><span id="yearcard_price"></span>元购买年卡，赠<span id="yearcard_cnt"></span>张灵豹券</p>
				 </div>
				 <div class="ridio">
					<span class="iconfont" id="icon_NK">&#xe61a;</span>
				 </div>
			 </div>
			<div class="buy">
				<div  class="countprice">需支付：<span style="color: red;"><span style="font-size: 0.14rem;">￥</span><span id="priceCount">0</span></span></div>
                  <div class="mui-row" style="width: 100%;height: 0.5rem;border-bottom: .5px solid #EEEEEE;">
					  <div class="mui-col-xs-2" style="text-align: center;height: 0.5rem;line-height: 0.5rem;"><img src="../../images/mine/wechat_pay.png" style="height: 0.25rem;width: 0.25rem;vertical-align: middle;" alt=""></div>
					  <div  class="mui-col-xs-6" style="color: #999;height: 0.5rem;line-height: 0.5rem;font-size: 0.16rem;">微信支付</div>
					  <div  class="mui-col-xs-4" style="height: 0.5rem;line-height: 0.5rem;text-align: right;padding-right: 0.15rem;"><img src="../../images/mine/activeicon.png" style="height: 0.2rem;width: 0.2rem;vertical-align: middle;" alt=""></div>
					  </div>
					  <div class="gobybox" id="payment">立即支付</div>
			</div>
			<p></p>
			<div class="about">
				<h5>关于灵豹劵</h5>
				<p>对重点客户使用灵豹劵，可以获得更全面的客户信息，并通过潜力预测模型精准识别客户的购买潜力</p>
			</div>
			<p></p>
			<p  style="padding: 0px 0.2rem;">如有任何疑问，可以致电：<a href="javascipt:;" id="contractUs" style="color: #545454;text-decoration: underline;">13585571775</a>，联系我们的工作人员。</p>
		</div>
		<div id="outpos"/>
		<div id="output">
		<script>
		
			
				document.getElementById("contractUs").addEventListener("tap", function(){
				if(mui.os.plus){
					plus.device.dial("13585571775");
				}else{
					location.href = "tel:13585571775";
				}
			});
		
			
		var pays={};
		function plusReady(){
				storage.init();
				storageUser = kidstorageuser.getInstance();
				//获取灵豹劵单价
				let cwv=plus.webview.currentWebview();
				document.getElementById("yearcard_cnt").innerText=cwv.yearcard_cnt;
				document.getElementById("yearcard_desc").innerText=cwv.yearcard_desc;
				document.getElementById("yearcard_price").innerText=cwv.yearcard_price;
	
			document.getElementById("price").innerText=cwv.price;
			// 获取支付通道
			plus.payment.getChannels(function(channels){
				var content=document.getElementById('payment');
				var info=document.getElementById('info');
				var txt='支付通道信息：';
				for(var i=0;i<channels.length;i++){
					var channel=channels[i];
					if(channel.id=='qhpay'||channel.id=='qihoo' ||channel.id=='alipay'){	// 过滤掉不支持的支付通道：暂不支持360相关支付
						continue;
					}
					pays[channel.id]=channel;
					txt += 'id:'+channel.id+', ';
					txt += 'description:'+channel.description+', ';
					txt += 'serviceReady:'+channel.serviceReady+'； ';
					var de=document.createElement('div');
					de.setAttribute('class', 'button');
						de.setAttribute('onclick', 'pay(this.id)');
					de.id=channel.id;
					// de.innerText=channel.description+'支付';
					document.getElementById("payment").innerText="";
					de.innerText='立即支付';
					content.appendChild(de);
					checkServices(channel);
				}
				// info.innerText=txt;
			},function(e){
				outLine('获取支付通道失败：'+e.message);
			});
		}
		document.addEventListener('plusready', plusReady, false);
		// 检测是否安装支付服务
		function checkServices(pc){
			if(!pc.serviceReady){
				switch(pc.id){
					case 'alipay':
					txt='检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
					break;
					default:
					txt='系统未安装“'+pc.description+'”服务，无法完成支付，是否立即安装？';
					break;
				}
				plus.nativeUI.confirm(txt, function(e){
					if(e.index==0){
						pc.installService();
					}
				}, pc.description);
			}
		}
		
		var w=null;
		// 支付
		function pay(id){
			let priceCount=document.getElementById("priceCount");
			let price=document.getElementById("price");
			if(priceCount.innerText=="0"){
				mui.toast("还没有选择购买数量");
				return;
			}
			if(w){return;}//检查是否请求订单中
			if(id==='appleiap'){
				console.log('应用内支付');
				clicked('buRell.html');
				return;
			}
			console.log('----- 请求支付 -----');
			if(navigator.userAgent.indexOf('StreamApp')>=0){
				appid='Stream';
			}
				
			
			// w=plus.nativeUI.showWaiting();
			// var amount = parseFloat(document.getElementById('priceCount').innerText);
		  let isNK=document.getElementById("nktap").getAttribute("isNK");
			let ticket_cnt=priceCount.innerText/price.innerText;
			let ticket_price=price.innerText;
			let pay_amt=priceCount.innerText*100;
			let card_type=" ";
			if(isNK=="true"){
				ticket_cnt=1;
				ticket_price=plus.webview.currentWebview().yearcard_price;
				pay_amt=plus.webview.currentWebview().yearcard_price*100;
				card_type="year";
			}
				//请求微信预付订单
			  request("/cmdb/wechatPayOrder/",
			  {
				sales_id:storageUser.UId,
				ticket_cnt:ticket_cnt,
				ticket_price:ticket_price,
				pay_amt:pay_amt,
				card_type:card_type
			  },function(r){//获取订单以后调起微信支付
			  // alert(JSON.stringify(r));
			  let data=r.DATASET;
			  var order = {
					retcode: 0,//5+必备参数
					retmsg: "ok",//5+必备参数
					appid: data.appid,
					noncestr: data.nonceStr,
					package: "Sign=WXPay",
					partnerid: data.partnerid,
					prepayid: data.prepayid,
					timestamp: data.timestamp,
					sign:data.sign
					}
				 	console.log('----- 请求订单成功 -----');
				 plus.payment.request(pays[id],order,function(result){//调起支付
							mui.toast("支付成功,已购买"+cnt+"张灵豹劵");
							let webviewMine=plus.webview.getWebviewById("mine/mine.html");
							mui.fire(webviewMine, 'refreshPage',{});
								mui.back();	
				 },function(e){
					 let paystatus=e.message.split(':')[1].substr(0,2);
					 if(paystatus==-2){
						 mui.toast("支付取消，未购买灵豹券");
					 }else{
				
						 mui.toast('支付失败，未知错误');
					 }
				 });
			  })
	
		}

		let nkobj=document.getElementById("nktap");

			let licount=document.querySelector("#buy").getElementsByTagName("li");
			nkobj.addEventListener("tap",function(){
				let edate=plus.webview.currentWebview().edate;
				if(edate.trim()=="" || edate==null){
							for(let i=0;i<licount.length;i++){
								licount[i].classList.remove("active_li");
							}
							let wc=plus.webview.currentWebview();
							// alert(cwv.yearcard_cnt);
							// alert(cwv.yearcard_desc);
							// alert(cwv.yearcard_price);
						nkobj.style.border="1px solid #47BAEF";
						nkobj.setAttribute("isNK",true)
						document.getElementById("icon_NK").innerHTML="&#xe63e;";
						document.getElementById("icon_NK").style.color="#47BAFE";
						priceCount.innerText=parseFloat(wc.yearcard_price).toFixed(2);
							
			}else{
				mui.toast("您已经是年卡会员了");
			}
		})

		for(let i=0;i<licount.length;i++){
			licount[i].classList.remove("active_li");
				licount[i].addEventListener("tap",function(e){
						nkobj.style.border="1px solid #f8f8f8";
					document.getElementById("icon_NK").innerHTML="&#xe61a;";
					document.getElementById("icon_NK").style.color="#E3E3E3";
					nkobj.setAttribute("isNK",false)
					if(i!=5){
						let count=licount[i].getAttribute("value");
						let ss=parseFloat(price.innerText)*parseFloat(count);
						priceCount.innerText=ss.toFixed(2);
						document.getElementById("number").value="";
					for	(let j=0;j<licount.length;j++){
						
						licount[j].classList.remove("active_li");
					}
					licount[i].classList.add("active_li");
				}else{
					for	(let j=0;j<licount.length;j++){
						licount[j].classList.remove("active_li");
					}
			}
			})

		}
			let number=document.getElementById("number");
			number.addEventListener("input",function(){
				 if(! /^\d+$/.test(number.value)){
					number.value="";
					priceCount.innerText=0;
				}else if(number.value.trim()==""){
					priceCount.innerText=0;
				}else{
					let count=parseFloat(price.innerText)*parseFloat(number.value);
					priceCount.innerText=count.toFixed(2)
				}
		})
		number.addEventListener("focus",function(){
			if(number.value.trim()==""){
				priceCount.innerText=0;
			}
		})
		
		
			
		</script>
	</body>
</html>
